<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="700px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="form-class" v-loading="loading">
            <el-form-item label="问题类型" prop="ReasonForDispute">
                <el-select 
                        v-model="model.QuestionType"
                        filterable
                        collapse-tags
                        clearable
                        placeholder="请选择问题类型">
                    <el-option
                    v-for="item in disputes"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="争议原因说明" prop="ReasonForDispute">
                <el-select 
                        v-model="model.ReasonForDispute"
                        filterable
                        collapse-tags
                        clearable
                        placeholder="请选择争议原因说明">
                    <el-option
                    v-for="item in disputemsg"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="补充描述" prop="Supplementary">
                <el-input 
                    v-model.trim="model.remark" 
                    type="textarea" 
                    :rows="6" 
                    placeholder="请填写补充描述（最多200字符）" 
                    :maxlength="200" 
                    show-word-limit 
                    clearable 
                    style="width: 100%; border-radius: 8px; background-color: #f5f7fa; color: #303133; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                </el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { ReasonForDispute,ReasonForDisputemsg,DisputeDataInfo,addDisputeDataInfo } from '@/api/orderSource'
export default {
    name: 'DisputeDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            disputes: [],
            disputemsg: [],
            id: 0,
            tabstatus: "",
            model: {
                id: '',
                date: '',
                type: '',
                status	: ''
            },
            rules: {
                ReasonForDispute: [{ required: true, message: '争议原因说明不能为空', trigger: ['blur', 'change'] }],
                QuestionType: [{ required: true, message: '问题类型不能为空', trigger: ['blur', 'change'] }],
            },
        }
    },
    computed: {
        title() {
            return `争议原因`
        },
        disabled() {
            return !!this.id
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                this.id = val.id
                this.tabstatus = val.tabstatus
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        try {
            const ReasonForDisputeData = await ReasonForDispute()
            this.disputes = ReasonForDisputeData ?? []
            const ReasonForDisputeDatamsg= await ReasonForDisputemsg()
            this.disputemsg = ReasonForDisputeDatamsg ?? []
        } catch (error) {
        }
        // this.getDetail()
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { id: this.id ,tabstatus: this.tabstatus }
            DisputeDataInfo(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    this.model.date = this.model.date ? new Date(this.model.date) : undefined
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                if (this.save) {
                    return
                }
                this.save = true

                const params = { ...this.model }
                params.id = this.id
                params.tabstatus = this.tabstatus

                addDisputeDataInfo(params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.form-class.el-form .el-form-item {
    width: 100%;
    margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
    width: 400px;
}
</style>
